<template>
  <div class="mod-project">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        项目名称
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="项目名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
        <el-button  type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        width="200"
        label="项目名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" v-if="scope.row.flag"></el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="unit"
        header-align="center"
        align="center"
        width="120"
        label="计价单位">
        <template slot-scope="scope">
          <el-input v-model="scope.row.unit" v-if="scope.row.flag"></el-input>
          <span v-else>{{scope.row.unit}}</span>
        </template>
      </el-table-column>
       <el-table-column
        prop="charges"
        header-align="center"
        align="center"
        width="120"
        label="收费标准(元)">
        <template slot-scope="scope">
          <el-input v-model="scope.row.charges" v-if="scope.row.flag===true"></el-input>
          <span v-else>{{scope.row.charges}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        header-align="center"
        show-overflow-tooltip
        label="项目明细">
        <template slot-scope="scope">
          <el-input v-model="scope.row.desc" v-if="scope.row.flag"></el-input>
          <span v-else>{{scope.row.desc}}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.flag"  type="text" size="small" @click="addOrUpdateHandle(scope.row,false)">完成</el-button>
          <el-button v-else type="text" size="small" @click="addOrUpdateHandle(scope.row,true)">修改</el-button>
          <el-button  type="text" size="small" @click="deleteHandle(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        userName: ""
      },
      dataList: [],
      AllList: [],
      dataListLoading: false
    };
  },
  created() {
    this.AllList = [
      {
        flag: false,
        name: "挂号费",
        unit: "次/天",
        charges: "0.80",
        desc:
          "含门诊、急诊及其为患者提供候诊就诊设施条件、门诊费用、门诊费用、门诊费用"
      },
      {
        flag: false,
        name: "点滴费",
        unit: "次/天",
        charges: "0.80",
        desc: "含门诊、急诊及其为患者提供候诊就诊设施条件、门诊费用"
      },
      {
        flag: false,
        name: "动脉导管结扎术",
        unit: "次",
        charges: "1116.00",
        desc: "含门诊、急诊及其为患者提供候诊就诊设施条件、门诊费用"
      }
    ];
    this.dataList = this.AllList;
  },
  methods: {
    // 按项目名称查询
    search() {
      this.dataList = this.AllList.filter((item, index) => {
        console.log(item.name.indexOf(this.dataForm.userName));
        return item.name.indexOf(this.dataForm.userName) != -1;
      });
    },
    // 新增
    add() {
      this.dataList.push({
        flag: false,
        name: "",
        unit: "",
        charges: "",
        desc: ""
      });
    },
    // 修改
    addOrUpdateHandle(row, bo) {
      console.log(row);
      row.flag = bo;
    },
    // 删除
    deleteHandle(row, index) {
      console.log(row);
      console.log(index);
      this.$confirm(`确定删除第${index + 1}行`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.dataList.splice(index, 1);
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.mod-project {
  padding: 40px;
}
</style>

